<div class="prompt-box bborder">
  <div class="header">
    <div class="title">{{ title }}</div>
    <div class="win-btns">
      <div class="btn ccenter close" (click)="onClose()">
        <i class="fa-light fa-xmark"></i>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="inner">
      <!-- 图片容器或拖拽区域 -->
      <div class="image-container left" [class.drag-over]="isDragOver" (click)="!imageUrl && reSelectInput.click()">
        <!-- 加载状态 -->
        @if (isLoading) {
        <div class="loading">
          <i class="fa-light fa-spinner"></i>
          正在处理图片...
        </div>
        }
        <!-- 空状态提示 -->
        @if (!imageUrl && !isLoading) {
        <div class="empty-tip">
          <i class="fa-light fa-image"></i>
          <p>点击选择图片或拖拽图片到此处</p>
          <p class="sub-text">支持 JPEG、PNG、WebP 格式</p>
        </div>
        }

        <img #cropperImage [src]="imageUrl" [style.display]="imageUrl && !isLoading ? 'none' : 'none'">
        <!-- 操作提示 -->
        @if (imageUrl && !isLoading) { <!-- 图片显示区域 -->
        <div class="operation-tips">
          <!-- <div class="tip-item">
          <i class="fa-light fa-up-down-left-right"></i>
          拖拽移动图片位置
        </div>
        <div class="tip-item">
          <i class="fa-light fa-magnifying-glass-plus"></i>
          滚轮缩放图片大小
        </div> -->
          <!-- <div class="tip-item ccenter">切换大小端
            <nz-switch nzSize="small" [(ngModel)]="options.endian" (ngModelChange)="onCropChange()"></nz-switch>
          </div> -->
          <div class="tip-item ccenter">颜色反转
            <nz-switch nzSize="small" [(ngModel)]="options.invert" (ngModelChange)="onCropChange()"></nz-switch>
          </div>
          <div class="tip-item ccenter">使能抖动
            <nz-switch nzSize="small" [(ngModel)]="options.dither" (ngModelChange)="onCropChange()"></nz-switch>
          </div>
          @if(!options.dither) {
          <div class="tip-item ccenter">取色阀值
            <nz-input-number [(ngModel)]="options.threshold" (ngModelChange)="onCropChange()" [nzControls]="false"
              nzSize="small" nzMin="1" nzMax="255" />
          </div>
          }
        </div>
        }
      </div>
      <div class="right ccenter">
        <canvas #myCanvas result></canvas>
        <div class="right-text ccenter">{{ currentCropSize.width }} × {{ currentCropSize.height }}</div>
      </div>
    </div>

    <div class="footer">
      <button nz-button [nzSize]="'small'" nzType="default" (click)="onClose()">取消</button>
      <!-- 重选图片按钮 -->
      <input #reSelectInput type="file" accept="image/*" (change)="onFileSelected($event)" style="display: none;" />
      @if (imageUrl && !isLoading) {
      <button nz-button [nzSize]="'small'" nzType="default" (click)="reSelectInput.click()">
        重选图片
      </button>
      }
      <!-- 重置位置按钮 -->
      @if (imageUrl && !isLoading && cropper) {
      <button nz-button [nzSize]="'small'" nzType="default" (click)="centerCropBox()" title="重置图片位置和缩放">
        <i class="fa-light fa-arrows-rotate"></i>
        重置
      </button>
      }
      <!-- 调试按钮 -->
      <!-- @if (imageUrl && !isLoading) {
      <button nz-button [nzSize]="'small'" nzType="default" (click)="testCropper()" title="查看调试信息">
        调试
      </button>
      } -->
      <!-- 确定按钮 -->
      <button nz-button [nzSize]="'small'" nzType="primary" [disabled]="!imageUrl || isLoading" [nzLoading]="isLoading"
        (click)="onConfirm()">
        确定
      </button>
    </div>
  </div>
</div>